<template>
<div>
        <div id="main" class=" w-[100%] h-[600px]"></div>
</div>
</template>

<script setup>
import { ref ,onMounted,reactive} from 'vue' 
import * as echarts from 'echarts';
import {graph} from '@/http/index.js'
const list = ref([])
const echartsList = ()=>{
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
  let tooltips = [
        {
          name:'一月入銷售額',
          category:'一月',
          value:0,
        },
        {
          name:'二月入銷售額',
          category:'二月',
         value:0,
        },
        {
          name:'三月入銷售額',
          category:'三月',
          value:0,
        },
        {
          name:'四月入銷售額',
          category:'四月',
          value:0,
        },
        {
          name:'五月入銷售額',
          category:'五月',
          value:0,
        },
        {
          name:'六月入銷售額',
          category:'六月',
          value:0,
        },
        {
          name:'七月入銷售額',
          category:'七月',
          value:0,
        },
        {
          name:'八月入銷售額',
          category:'八月',
          value:0,
        },
        {
          name:'九月入銷售額',
          category:'九月',
          value:0,
        },
        {
          name:'十月入銷售額',
          category:'十月',
          value:0,
        },
        {
          name:'十一月入銷售額',
          category:'十一月',
          value:0,
        },
        {
          name:'十二月入銷售額',
          category:'十二月',
          value:0,
        },
      ]
      tooltips.map((e,index)=>{
        tooltips[index].value = list.value[index]
      })
      console.log(tooltips);
var option;
option = {
    legend: {
        data: ['當年月入銷售額'],
    },
  tooltip: {
         trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
  },
  xAxis:    {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          },
  // 声明一个 Y 轴，数值轴。
  yAxis: {
    type: 'value',
            axisLine: {show:false},
            axisTick: {show:false},
            splitLine:{show:true},
  },
  color:['#50BC58'],
  series: [
         {
            data:tooltips,
            name: '當年月入銷售額',
            type:'line',
            smooth:true,
            // color:'red'
          },
        //   {
        //     data:tooltipss,
        //     name: '當年月入銷售額',
        //     type:'line',
        //     smooth:true,
        //   }
  ]

//   yAxis: {
//     type: 'value'
//   },
//   series: [
//     {
//       data: [230, 230, 224, 218, 135, 147, 260],
//       type: 'line'
//     },
//         {
//       data: [120, 545, 782, 814, 154, 241, 574],
//       type: 'line'
//     },
//         {
//       data: [254, 587, 528, 875, 215, 457, 458],
//       type: 'line'
//     },
//   ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);
}
const form = reactive({
    school_id:localStorage.getItem('school_id')
})
const init = async()=>{
  const data = await graph(form)
  if (data.code == 200) {
    list.value = data.data
    echartsList()
  }
}
defineExpose({
  init
})
onMounted(() => {
    // echartsList()
})

</script>

<style lang='less'  scoped>

</style>